<div class="flex-window stretch debug-advanced">
    <div class="flex-window-head">
        <div class="clearfix padding padding-sm">
            <div class="flex-header flex-horizontal flex-shrink-0 margin-bottom">
                <div>
                    <div class="btn-group">
                        <button class="btn btn-primary" data-bind="click: pause, visible: liveClient">
                            <i class="icon-pause"></i> <span>Pause</span>
                        </button>
                        <button class="btn btn-primary" data-bind="click: resume, visible: !liveClient()">
                            <i class="icon-play"></i> <span>Resume</span>
                        </button>
                    </div>
                </div>
                <div>
                    <input class="form-control" placeholder="Filter (Name, Thread Id)" data-bind="textInput: filter" />
                </div>
                <div class="btn-group">
                    <select
                        id="visibleColumnsSelector"
                        size="5"
                        multiple="multiple"
                        data-bind="options: allColumnHeaders, selectedOptions: visibleColumnHeaders"
                    ></select>
                </div>
                <div>
                    <div class="text-muted info-block">
                        <div class="text-center"><small>RavenDB CPU Usage:</small></div>
                        <div class="text-center">
                            <small><strong data-bind="text: serverCpuUsage().toFixed(0) + ' %'"></strong></small>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="text-muted info-block">
                        <div class="text-center"><small>Machine CPU Usage:</small></div>
                        <div class="text-center">
                            <small><strong data-bind="text: machineCpuUsage().toFixed(0) + ' %'"></strong></small>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="text-muted info-block">
                        <div class="text-center"><small>Threads Count:</small></div>
                        <div class="text-center">
                            <small><strong data-bind="text: threadsCount"></strong></small>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="text-muted info-block">
                        <div class="text-center"><small>Dedicated threads Count:</small></div>
                        <div class="text-center">
                            <small><strong data-bind="text: dedicatedThreadsCount"></strong></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-grow">
        <div class="results-error" data-bind="visible: !isConnectedToWebSocket()">
            <div class="help-block bg-warning text-warning">
                <span data-bind="visible: isPause"><i class="icon-warning"></i><span>Live Update is paused</span></span>
                <span data-bind="visible: !isPause()"><i class="btn-spinner"></i><span class="margin-left">Trying to Connect</span></span>
            </div>
        </div>
        <div class="scroll-stretch">
            <div class="panel">
                <virtual-grid class="resizable documents-grid" params="controller: gridController, emptyTemplate: 'empty-threads-info-template'"></virtual-grid>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="empty-threads-info-template">
    No entries found.
</script>

<div class="tooltip json-preview lg js-threads-runtime-tooltip" style="opacity: 0">
</div>
